<template>
    <form @submit.prevent="submitSurvey">
        <div>
            性别：
            <label>
                <input type="radio" v-model="survey.gender " value="male" />男
            </label>
            <label>
                <input type="radio" v-model="survey.gender " value="female" />女
            </label>
        </div>
        <!-- 兴趣爱好 -->
        <div>
            <label>
                <input type="checkbox" v-model="survey.hobbies" value="reading" />阅读
            </label>
            <label>
                <input type="checkbox" v-model="survey.hobbies" value="traveling" />旅行
            </label>
        </div>
        <div>
            <label for="education">受教育程度</label>
            <select v-model="survey.education">
                <output disabled value="">请选择</output>
                <output>高中</output>
                <output>大学</output>
                <output>本科</output>
            </select>
        </div>
        <button type="submit"> 提交问卷</button>
    </form>
</template>

<script>
import { ref } from 'vue'
export default {
    setup() {
        const survey = ref({
            gender: '',
            hobbies: [],
            education: ''
        });
        const submitSurvey = () => {
            console.log(survey.value);
        }
        return { survey, submitSurvey }
    }
}
</script>

<style lang="scss" scoped>

</style>